<template>
  <div>
    <Nav></Nav>
    <div class="container layout layout-margin-top">
      <div class="row">
        <div class="col-md-9 layout-body">
          <!-- 查询条件 -->
          <div class="content">
            <!-- 类别 -->
            <div class="row course-cates">
              <div class="col-md-1 course-cates-title">类别：</div>
              <div class="col-md-11 course-cates-content">
                <a
                  :class="{active:query.type=='all'}"
                  @click.prevent="query.type='all'"
                >全部</a>
                <a
                  :class="{active:query.type=='free'}"
                  @click.prevent="query.type='free'"
                >免费</a>
                <a
                  :class="{active:query.type=='limited'}"
                  @click.prevent="query.type='limited'"
                >限免</a>
                <div class="course-cates-vip">
                  <img src="@/assets/img/vip-icon.png">
                  <a
                    :class="{active:query.type=='member'}"
                    @click.prevent="query.type='member'"
                  >会员</a>
                </div>
              </div>
            </div>
            <!-- 标签 -->
            <div class="row course-cates">
              <div class="col-md-1 course-cates-title">标签：</div>
              <div class="col-md-11 course-cates-content">
                <a
                  v-for='item in tags'
                  :key='item.id'
                  :class="{active:query.tag==item.id}"
                  @click.prevent="query.tag=item.id"
                >{{item.label}}</a>
              </div>
            </div>
          </div>
          <!-- 课程 -->
          <div class="content position-relative">
            <!-- status 选择 -->
            <ul
              class="nav nav-tabs"
              role="tablist"
            >
              <li :class="{active:query.status=='online'}">
                <a @click="query.status='online'">已上线</a></li>
              <li :class="{active:query.status=='preview'}">
                <a @click="query.status='preview'">即将上线</a></li>
            </ul>
            <div class="clearfix"></div>
            <!-- 排序选项 -->
            <div class="courses-sort">
              <a
                :class="{active:query.sort=='latest'}"
                @click="query.sort='latest'"
              >最新</a>
              /
              <a
                :class="{active:query.sort=='hotest'}"
                @click="query.sort='hotest'"
              >最热</a>
            </div>
            <!-- 课程列表 -->
            <div class="row">
              <Course v-for='item in courses' :course='item' :key='item.id'></Course>
            </div>
            <!-- 分页 -->
            <el-pagination
              background
              layout="prev, pager, next"
              :page-count='query.totalPages'
              :current-page='query.currentPage'
              prev-text="上一页"
              next-text="下一页"
              @current-change="cp=>{query.currentPage=cp}"
            ></el-pagination>
          </div>
        </div>
        <!-- 右侧边栏 -->
        <div class="col-md-3 layout-side">
          <!-- 登录注册 -->
          <div class="panel panel-default panel-userinfo">
            <div class="panel-body body-userinfo">
              <div class="media userinfo-header">
                <div class="media-left">
                  <div class="user-avatar">

                    <a
                      class="avatar"
                      href="#sign-modal"
                      data-toggle="modal"
                      data-sign="signin"
                    >
                      <img
                        class="circle"
                        src="@/assets/img/logo-grey.png"
                      >
                    </a>

                  </div>
                </div>
                <div class="media-body">
                  <span class="media-heading username">欢迎来到实验楼</span>
                  <p class="vip-remain">做实验，学编程</p>
                </div>
              </div>

              <div class="row userinfo-data">

                <hr>
                <div class="btn-group-lr">
                  <a
                    href="#sign-modal"
                    type="button"
                    class="btn btn-success col-md-5 col-xs-6 login-btn"
                    data-toggle="modal"
                    data-sign="signin"
                  >登录</a>
                  <a
                    href="#sign-modal"
                    type="button"
                    class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn"
                    data-toggle="modal"
                    data-sign="signup"
                  >注册</a>
                </div>

              </div>

              <div class="userinfo-footer row">
                <div class="col-md-6 col-xs-6 pos-left">

                  <a
                    href="#sign-modal"
                    data-toggle="modal"
                    data-sign="signin"
                  ><span class="glyphicon glyphicon-bookmark"></span> 加入私有课</a>

                </div>
                <div class="col-md-6 col-xs-6 pos-right">
                  <a
                    href="/contribute"
                    target="_blank"
                  ><span class="glyphicon glyphicon-send"></span> 我要投稿</a>
                </div>

                <div
                  id="join-private-course"
                  class="modal fade words-ctrl"
                  tabindex="-1"
                  role="dialog"
                >
                  <div
                    class="modal-dialog"
                    role="document"
                  >
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">加入私有课</h4>
                      </div>
                      <div class="modal-body">
                        <div style="margin:15px 0; font:16px;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                        <form
                          id="private-course-form"
                          method="POST"
                          action="/courses/join"
                        >
                          <div class="form-group">
                            <label for="code">邀请码</label>
                            <input
                              class="form-control"
                              id="code"
                              name="code"
                              type="text"
                              value=""
                            >
                            <input
                              name="_csrf_token"
                              type=hidden
                              value="1483780974##87f89328c5616669f00302a263fe9061bb852818"
                            >
                          </div>
                        </form>

                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >取消</button>
                        <button
                          type="button"
                          class="btn btn-primary"
                          onclick="document.getElementById('private-course-form').submit();"
                        >确定</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 最热路径 -->
          <div class="sidebox">
            <div class="sidebox-header">
              <h4 class="sidebox-title">最热路径</h4>
            </div>
            <div class="sidebox-body course-content side-list-body">
              <a href="/paths/python"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471513769430.png"
                > Python 研发工程师</a>
              <a href="/paths/bigdata"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471513926288.png"
                > 大数据工程师</a>
              <a href="/paths/cpp"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471513793360.png"
                > C++ 研发工程师</a>
              <a href="/paths/security"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471513867033.png"
                > 信息安全工程师</a>
              <a href="/paths/linuxsys"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471514004752.png"
                > Linux 运维工程师</a>
            </div>
          </div>
          <!-- 公众号二维码 -->
          <div class="side-image side-qrcode">
            <img src="@/assets/img/ShiyanlouQRCode.png">
            <div class="side-image-text">关注公众号，手机看教程</div>
          </div>

        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Nav from '@/components/Nav'
import Footer from '@/components/Footer'
import Course from '@/components/Course'
export default {
  components: {
    Nav,
    Footer,
    Course
  },
  data() {
    return {
      query: {
        type: 'all', // 全部: all, 免费: free, 限免:limited, 会员: member
        tag: 1, // 全部: all, python, c/c++, java, javascript...
        status: 'online', // 已上线:online, 即将上线:preview
        sort: 'latest', // 最新:latest, 最热:hotest
        pageSize: 15, // 每页显示数量
        totalPages: 25, // 总页数
        currentPage: 5 // 当前页
      },
      tags: [
        {
          id: 1,
          label: '全部'
        },
        {
          id: 2,
          label: 'Python'
        },
        {
          id: 3,
          label: 'C/C++'
        },
        {
          id: 4,
          label: 'Linux'
        },
        {
          id: 5,
          label: 'Web信息安全'
        },
        {
          id: 6,
          label: 'PHP'
        },
        {
          id: 7,
          label: 'Java'
        },
        {
          id: 8,
          label: 'NodeJS'
        },
        {
          id: 9,
          label: 'Android'
        },
        {
          id: 10,
          label: 'GO'
        },
        {
          id: 11,
          label: 'Spark'
        },
        {
          id: 12,
          label: '计算机专业课'
        },
        {
          id: 13,
          label: 'Hadoop'
        },
        {
          id: 14,
          label: 'HTML5'
        },
        {
          id: 15,
          label: 'Scala'
        },
        {
          id: 16,
          label: 'Ruby'
        },
        {
          id: 17,
          label: 'R'
        },
        {
          id: 18,
          label: '网络'
        },
        {
          id: 19,
          label: 'Git'
        },
        {
          id: 20,
          label: 'SQL'
        },
        {
          id: 21,
          label: 'NoSQL'
        },
        {
          id: 22,
          label: '算法'
        },
        {
          id: 23,
          label: 'Docker'
        },
        {
          id: 24,
          label: 'Swift'
        },
        {
          id: 25,
          label: '汇编'
        },
        {
          id: 26,
          label: 'Windows'
        }
      ],
      courses: [
        {
          id: 1,
          title: '新手指南之玩转实验楼',
          img: 'https://dn-simplecloud.shiyanlou.com/ncn63.jpg',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 2,
          title: 'Linux 基础入门（新版）',
          img: 'https://dn-simplecloud.shiyanlou.com/ncn1.jpg',
          isMember: false,
          isBootcamp: false,
          totalNum: 52879
        },
        {
          id: 3,
          title: 'Kali 渗透测试 - 后门技术实战（10个实验）',
          img: 'https://dn-simplecloud.shiyanlou.com/1480389303324.png',
          isMember: false,
          isBootcamp: true,
          totalNum: 56378
        },
        {
          id: 4,
          title: 'Kali 渗透测试 - Web 应用攻击实战',
          img: 'https://dn-simplecloud.shiyanlou.com/1480389165511.png',
          isMember: true,
          isBootcamp: true,
          totalNum: 1234
        },
        {
          id: 5,
          title: '使用OpenCV进行图片平滑处理打造模糊效果',
          img: 'https://dn-simplecloud.shiyanlou.com/1482113947345.png',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 6,
          title: '使用 Python 解数学方程',
          img: 'https://dn-simplecloud.shiyanlou.com/1482807365470.png',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 7,
          title: '跟我一起来玩转Makefile',
          img: 'https://dn-simplecloud.shiyanlou.com/1482215587606.png',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 8,
          title: 'Kali 渗透测试 - 服务器攻击实战（20个实验）',
          img: 'https://dn-simplecloud.shiyanlou.com/1480386391850.png',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 9,
          title: '手把手教你实现 Google 拓展插件',
          img: 'https://dn-simplecloud.shiyanlou.com/1482113981000.png',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 10,
          title: 'DVWA之暴力破解攻击',
          img: 'https://dn-simplecloud.shiyanlou.com/1482113522578.png',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 11,
          title: 'Python3实现简单的FTP认证服务器',
          img: 'https://dn-simplecloud.shiyanlou.com/1482113485097.png',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 12,
          title: 'SQLAlchemy 基础教程',
          img: 'https://dn-simplecloud.shiyanlou.com/1481689616072.png',
          isMember: false,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 13,
          title: '使用OpenCV&&C++进行模板匹配',
          img: 'https://dn-simplecloud.shiyanlou.com/1481511769551.png',
          isMember: true,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 14,
          title: 'Metasploit实现木马生成、捆绑及免杀',
          img: 'https://dn-simplecloud.shiyanlou.com/1481512189119.png',
          isMember: true,
          isBootcamp: false,
          totalNum: 1234
        },
        {
          id: 15,
          title: 'Python 3 实现 Markdown 解析器',
          img: 'https://dn-simplecloud.shiyanlou.com/1480644410422.png',
          isMember: true,
          isBootcamp: false,
          totalNum: 1234
        }
      ]
    }
  },
  methods: {
    changePage(currentPage) {
      console.log(currentPage)
    }
  },
  watch: {
    query: {
      handler(newV, oldV) {
        console.log('update query')
      },
      deep: true
    }
  }
}
</script>
<style>
@font-face {
  font-family: "lantingxihei";
  src: url("~@/assets/fonts/FZLTCXHJW.TTF");
}
.course-cates-content {
  text-align: left;
}
.side-list-body {
  text-align: left;
}
.en-footer {
  padding: 30px;
  text-align: center;
  font-size: 14px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0c9;
  color: #fff;
}
.number:hover {
  color: #0c9 !important;
}
</style>
